<template>
  <div class="terminal-info-view">

    <el-form
        :inline="true"
        label-position="right"
        label-width="130px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="招商规划名称:">
            {{ plan.planInfo.planName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="产品名称:">
            <span v-if="plan.planInfo">{{ getProductName(plan.planInfo) }}</span>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="准入模式:">
            {{ getLabel('access_mode', plan.planInfo.accessMode) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="终端价:">
            {{ plan.planInfo.terminalPrice }}元
            <span v-if="plan.planInfo">/{{ getLabel('sell_unit', plan.planInfo.sellUnit) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="关联产品价格:">
            <el-link
                :underline="false"
                style="display: flex;align-items: center"
                type="primary"
                @click="priceClick"
            >{{ plan.planInfo.priceNumber }}
            </el-link>
            <!--                        <a class="mainColor" @click="priceClick">-->
            <!--                            {{plan.planInfo.priceNumber}}-->
            <!--                        </a>-->
          </el-form-item>
        </el-col>
        <!--                <el-col :span="12">-->
        <!--                    <el-form-item label="终端名称:">-->
        <!--                        {{datas.terminalName}}-->
        <!--                    </el-form-item>-->
        <!--                </el-col>-->

        <el-col :span="12">
          <el-form-item label="所在地区:">
            <span>{{ datas.terProvinceName }}-{{ datas.terCityName }}-{{ datas.terAreaName }}</span>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="营销体量:">
            {{ getLabel('sales_volume', datas.salesVolume) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="开发期限截至日期:">
            {{ dateFormat('yyyy-mm-dd', datas.expireTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="开发保证金:">
            <span v-if="datas.devEarnestMoney">{{ datas.devEarnestMoney }}元</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="最低销量:">

            <span v-if="datas.minSale">{{ datas.minSale }}{{
                getLabel('sell_unit', plan.planInfo.sellUnit)
              }}/{{ getLabel('sell_num_unit', datas.minSaleUnit) }}</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="销量保证金:">
            <span v-if="datas.sellEarnestMoney">{{ datas.sellEarnestMoney }}元</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="其他说明:">
            {{ datas.remark }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <!-- 产品终端价详情 -->
    <detail-drawer
        ref="detailDrawer"
        :size-width="1000"
        custom-title
    >
      <template #title>
        <span>产品价格 - {{ plan.planInfo.priceNumber }}</span>
      </template>
      <template #contents>

        <terminalPrice :id="plan.planInfo.productPriceId"/>

        <!--                <div class="drawer-content">-->
        <!--                    <div class="history-list">-->
        <!--                        <item-title title="基本信息" />-->
        <!--                        <client-price-base-info-->
        <!--                                :product-detail="plan.planInfo"-->
        <!--                                :price-detail="priceDetailRow"-->
        <!--                        />-->
        <!--                    </div>-->
        <!--                    <div class="history-list">-->
        <!--                        <item-title title="修改记录" />-->
        <!--                        <operation-view-->
        <!--                                :id="priceDetailRow?.id"-->
        <!--                                mode="product_price"-->
        <!--                        />-->
        <!--                    </div>-->
        <!--                </div>-->
      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'TerminalInfo',
  components: {
    productBaseInfo: defineAsyncComponent(() =>
        import('@/pages/CRM/views/commonView/detailComponents/product/productBaseInfo.vue')
    ),
    terminalPrice: defineAsyncComponent(() =>
        import('../../../../commonView/detailComponents/product/terminalPrice.vue')
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    plan: {
      type: Object,
      default: {},
    },
    isAudit: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, {emit}) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var data = reactive({
      priceDetailRow: {},
      detailDrawer: null,
    })

    const priceClick = () => {
      // api.product.PRODUCT_PRICE_DETAIL(props.plan.planInfo.productPriceId).then(res=>{
      //     if (!res.code){
      //         data.priceDetailRow = res.data.productPriceStrategy
      //         data.detailDrawer.open()
      //     }else {
      //         currentInstance.proxy.customMessage({
      //             type:'error',message:res.msg
      //         })
      //     }
      // })
      data.detailDrawer.open()
    }

    return {
      ...toRefs(data),

      priceClick,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";

.mainColor {
  color: $active-color;
}
</style>
